<template>
	<view class="content">
		<view class="text"> 每完成 6单 获得 {{sixAccount}}元 薪资抵扣券 </view>
		<view class="active">
			<view class="head">
				<view class=""> 已获得 <text>{{rewardAccount}}元</text> <text>薪资抵扣券</text>
				</view>
				<view class=""> 结算薪酬可抵用 </view>
			</view>
			<view class="progress">
				<view class="round round1">
				</view>
				<view class="round round2">
				</view>
				<view class="round round3">
				</view>
				<view class="round round4">
				</view>
				<view class="round round5">
				</view>
				<view class="round round6">
				</view>
				<view class="progress-active"
					:style="{width:orderNum>6?`100%`:orderNum>1?`${110*(orderNum-1)+40}rpx`:'0rpx'}">
					<view v-if="orderNum>0" class="img-box">
						<image class="img img1" src="/static/newMy/staff-my25.png" mode=""></image>
					</view>
					<view v-if="orderNum>1" class="img-box img-box2">
						<image class="img img2" src="/static/newMy/staff-my25.png" mode=""></image>
					</view>
					<view class="red-active-box">
						<image v-if="orderNum>2" class="red-active" src="/static/newMy/red-active.png" mode=""></image>
						<image v-else class="red-active" src="/static/newMy/red.png" mode=""></image>
						<text class="amount">{{threeAccount}}元</text>
					</view>
					<view v-if="orderNum>3" class="img-box img-box4">
						<image class="img img4" src="/static/newMy/staff-my25.png" mode=""></image>
					</view>
					<view v-if="orderNum>4" class="img-box img-box5">
						<image class="img img5" src="/static/newMy/staff-my25.png" mode=""></image>
					</view>
					<view class="red-box">
						<image v-if="orderNum>5" class="red" src="/static/newMy/red-active.png" mode=""></image>
						<image v-else class="red" src="/static/newMy/red.png" mode=""></image>
						<text class="amount">{{sixAccount}}元</text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in list"> 第{{item}}单 </view>
			</view>
		</view>
		<view class="rule">
			<view class="text">
				<span>活动时间:本月内</span>
				<span>发布任务且有雇员完成 </span>
				<view>完成 <span> 3</span> 单奖励 <span> {{threeAccount}}元 </span> 优惠券</view>
				<view>再完成 <span> 3 </span> 单奖励 <span> {{sixAccount}}元 </span> 优惠券</view>
				<span> 可循环获得奖励 </span>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [1, 2, 3, 4, 5, 6],
				orderNum: '',
				threeAccount: '',
				sixAccount: '',
				rewardAccount: ''
			};
		},
		methods: {
			async findTaskBillReward() {
				let res = await this.$fetch(this.$api.findTaskBillReward, {}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.orderNum = Number(res.data.rewardCount)
				this.sixAccount = res.data.sixAccount
				this.threeAccount = res.data.threeAccount
				this.rewardAccount = res.data.rewardAccount
			}
		},
		onLoad() {
			this.findTaskBillReward()
		}
	}
</script>
<style lang="less">
	.content {
		width: 100%;
		height: 1865rpx;
		min-height: 100vh;
		background: url('/static/newMy/employer-activebg.png') 0 0/cover no-repeat;
		background-size: 100% 100%;
		overflow: hidden;

		&>.text {
			width: 550rpx;
			height: 45rpx;
			background: url('/static/newMy/employer-activebg-text.png')center center/cover repeat;
			text-align: center;
			line-height: 45rpx;
			font-size: 32rpx;
			color: #FB4B41;
			font-weight: bold;
			margin: 440rpx auto auto auto;
		}

		.active {
			margin: 470rpx auto auto auto;
			width: 690rpx;
			height: 304rpx;
			background: url('/static/employer-active.png') center center/cover repeat;

			.head {
				width: 90%;
				margin: 0 auto;
				padding-top: 14rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>view:first-child {
					font-size: 32rpx;
					color: #FFFFFF;

					&>text {
						font-size: 36rpx;
						padding-left: 20rpx;
					}

					&>text:first-child {
						font-weight: bold;
					}
				}

				&>view:last-child {
					font-size: 28rpx;
					color: #833500;
				}
			}

			.progress {
				width: 616rpx;
				height: 8rpx;
				border-radius: 4rpx;
				background: #FFE3D2;
				margin: 100rpx auto auto 40rpx;
				position: relative;

				.round {
					position: absolute;
					top: -13rpx;
					left: 0;
					width: 26rpx;
					height: 26rpx;
					border-radius: 13rpx;
					background-color: #FFDDC9;
					margin-left: 20rpx;
				}

				.round2 {
					margin-left: 120rpx;
				}

				.round3 {
					margin-left: 220rpx;
				}

				.round4 {
					margin-left: 370rpx;
				}

				.round5 {
					margin-left: 470rpx;
				}

				.round6 {
					margin-left: 570rpx;
				}

				.progress-active {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					z-index: 2;
					height: 8rpx;
					border-radius: 4rpx;
					background: linear-gradient(to right, #FFDE00, #FF0066, #FF00B4, #D200FF);

					.img-box {
						width: 26rpx;
						height: 26rpx;
						border-radius: 13rpx;
						background-color: #FFD914;
						position: absolute;
						top: -13rpx;
						left: 0;
						margin-left: 20rpx;

						.img {
							width: 100%;
							height: 100%;
						}
					}

					.img-box2 {
						margin-left: 120rpx;
					}

					.red-active-box {
						width: 66rpx;
						height: 102rpx;
						position: absolute;
						top: -36rpx;
						left: 0;
						margin-left: 220rpx;

						.red-active {
							width: 100%;
							height: 100%;
						}

						.amount {
							position: absolute;
							top: 42rpx;
							left: 4rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #fff;
						}
					}

					.img-box4 {
						margin-left: 370rpx;
					}

					.img-box5 {
						margin-left: 470rpx;
					}

					.red-box {
						width: 66rpx;
						height: 102rpx;
						position: absolute;
						top: -36rpx;
						left: 0;
						margin-left: 570rpx;

						.red {
							width: 100%;
							height: 100%;
						}

						.amount {
							position: absolute;
							top: 42rpx;
							left: 4rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #fff;
						}
					}
				}
			}

			.list {
				width: 636rpx;
				margin: 60rpx auto auto 40rpx;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #2C2C2E;
			}
		}

		.rule {
			width: 690rpx;
			height: 474rpx;
			margin: 60rpx auto auto auto;
			margin-bottom: 100rpx;
			background: url('/static/guzhuRule.png') center center/cover repeat;
			overflow: hidden;

			.text {
				margin: 180rpx auto 100rpx 80rpx;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #333333;
				font-weight: 600;

				&>span {
					display: block;
				}

				&>view {
					span {
						color: #F3402E;
						padding: 0 8rpx;
					}
				}
			}
		}

		.uni-page-head-btn {
			color: #fff;
		}
	}
</style>